<template>
    <div class="large-screen-view">
        <div class="large-screen-wall">
            <div class="large-screen-header">
                <img src="@/assets/large-screen/header-title.png" alt="标题" />
            </div>
            <div class="large-screen-content">
                <!-- 左侧 -->
                <div class="left">
                    <!-- 个人信用重点关注、一般信用人员信息 -->
                    <CreditBox></CreditBox>
                    <!-- 人员、物品来源地和目的地数据-->
                    <ToFromBox></ToFromBox>
                    <!-- 人员、物品数量 -->
                    <PersonGoodsBox></PersonGoodsBox>
                </div>
                <!-- 中部 -->
                <div class="center">
                    <!-- 地图 -->
                    <MapTabs></MapTabs>
                </div>
                <!-- 右侧 -->
                <div class="right">
                    <!-- 风险人员提示 -->
                     <RiskPersonBox></RiskPersonBox>
                     <!-- 风险信息 -->
                     <RiskInfoBox></RiskInfoBox>
                     <!-- 重点免税商品销售情况 -->
                     <TaxBox></TaxBox>
                </div>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary">Primary</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import CreditBox from './components/CreditBox.vue'
import ToFromBox from './components/ToFromBox.vue'
import PersonGoodsBox from './components/PersonGoodsBox.vue'
import RiskPersonBox from './components/RiskPersonBox.vue'
import RiskInfoBox from './components/RiskInfoBox.vue'
import TaxBox from './components/TaxBox.vue'
import MapTabs from './components/MapTabs.vue'

const baseWidth = 1920
const baseHeight = 1080

function resize(): void {
    const content = document.querySelector('.large-screen-wall') as HTMLElement | null
    if (!content) return

    const scaleX = window.innerWidth / baseWidth
    const scaleY = window.innerHeight / baseHeight
    const scale = Math.min(scaleX, scaleY)

    content.style.transform = `scale(${scale})`
    content.style.left = `${(window.innerWidth - baseWidth * scale) / 2}px`
    content.style.top = `${(window.innerHeight - baseHeight * scale) / 2}px`
}

onMounted(() => {
    resize()
    window.addEventListener('resize', resize)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})
</script>


<style lang="less">
@import url(./large-screen.less);
</style>